// banner
.banner {
    background-color: #f6f0e4;

    .container {

        margin: 0 auto;
        background: url("../images/banner.png") no-repeat center center;
        background-size: 100%;

        .text {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // background-color: green;

            .hellow {
                width: 34%;

                .world {
                    font-size: 4rem;
                }

                .p2 {
                    // margin-top: 1rem;
                    padding: 2% 0;
                    font-size: 2.5rem;
                    color: #31364c;
                }

                .p3 {
                    // margin-top: 1.5rem;
                    font-size: 1.1rem;
                    color: #9699a6;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }



                .more {
                    width: 100%;
                    // margin-top: 2rem;
                    margin: 5% 0;

                    .btns {
                        // width: 30%;
                        border: 0;
                        font-size: 1rem;
                        border-radius: 2rem;
                        padding: 1rem 2rem;
                        color: #fff;
                        background-color: #252525;
                        transition: all .4s;

                        &:hover {
                            transform: translateY(-.5rem);
                            box-shadow: .1rem .2rem .5rem #252525;
                        }
                    }

                }
            }

        }


        .pic {
            width: 30%;
            // background-color: red;
            align-self: flex-end;
            // margin-top: 10rem;

            img {
                // width: 20vw;
                width: 100%;
                vertical-align: bottom;
            }
        }

    }

    @media screen and (max-width:1000px) {

        .container {
            .text {
                .hellow {
                    width: 50%;

                    .more {
                        button {
                            padding: 1.5rem 3rem;
                        }
                    }
                }
            }
        }
    }


    @media screen and (max-width:768px) and (min-width:500px) {

        .container {
            .text {
                padding-top: 2rem;

                .hellow {
                    width: 50%;

                    .world {
                        font-size: 3rem;
                    }

                    .p2 {
                        font-size: 2rem;
                    }
                }
            }
        }
    }

    @media screen and (max-width:600px) {

        .container {
            .text {
                .pic {
                    display: none;
                }

                .hellow {

                    width: 100%;
                    text-align: center;

                    .world {
                        font-size: 2rem;
                    }

                    .p2 {
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }

    @media screen and (max-width:523px) {

        .container {
            .text {
                .pic {
                    display: none;
                }

                .hellow {

                    // width: 100%;
                    // text-align: center;

                    .world {
                        padding-top: 5%;
                    }

                    .p2 {
                        padding: 0;
                    }

                    .more {
                        margin-top: 3%;
                        margin-bottom: 5%;
                    }
                }
            }
        }
    }

}

// 相机部分
.container {
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        // margin-top: 5%;
        padding-top: 5%;
        flex-wrap: wrap;

        .item {
            width: 30%;
            text-align: center;

            .back {
                .box1 {
                    width: 10rem;
                    height: 10rem;
                    border-radius: 100%;
                    border: .5rem solid #f6f0e4;
                    margin: 0 auto;
                    cursor: pointer;
                    flex-shrink: 0;

                    img {
                        width: 100%;
                        text-align: center;
                    }
                }
            }

            #back2 {
                background-color: #f6f0e4;
            }

            // 文字
            .Solutions {
                margin-top: 1rem;
                font-size: 2rem;

            }

            p {
                font-size: 1rem;
                margin-top: 1rem;
            }
        }

    }


}



@media screen and (max-width:721px) {

    .container {
        .box {
            .item {
                width: 100%;
                display: flex;
                justify-content: space-between;
                text-align: left;
                padding-top: 3%;

                .box2 {
                    padding-left: 2rem;

                }
            }
        }
    }
}

@media screen and (max-width:448px) {

    .container {
        .box {
            .item {
                p {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }
            }
        }
    }
}

@media screen and (max-width:360px) {

    .container {
        .box {
            .item {
                flex-wrap: wrap;
                text-align: center;

                .back {
                    width: 100%;
                }

                .box2 {
                    width: 100%;

                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}


// flow部分
.flow {
    margin-top: 5rem;
    background-color: #ff9700;

    .container {
        .mode {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 3%;

            // 人物
            #people2 {
                display: none;
            }

            .people {
                width: 40%;
                align-self: flex-end;

                img {
                    width: 100%;
                    vertical-align: bottom;
                }
            }

            // 文字
            .books {
                width: 48%;
                color: #fff;

                .invest {
                    font-size: 3rem;
                    line-height: 3rem;
                }

                p {
                    width: 100%;
                    margin-top: 3rem;
                    font-size: 1rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    cursor: pointer;
                    text-overflow: ellipsis;
                }

                .list {
                    text-align: left;
                    margin-top: 3rem;
                    font-size: 0.9rem;
                    padding-left: 1rem;

                    span {
                        display: inline-block;
                        font-size: 1rem;
                        padding-right: 1rem;
                    }

                    div {
                        margin-bottom: 1.2rem;
                        transition: all .4s;
                    }


                }

                // 按钮
                .sub {
                    margin: 2rem 0;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    text-align: center;
                    align-items: center;
                    font-size: .9rem;

                    .learn {
                        width: 21%;
                        background-color: #252525;
                        border-radius: 20rem;
                        padding: .6rem;
                        margin-right: 2rem;
                        transition: all .4s;
                        cursor: pointer;

                        span {
                            margin-left: .5rem;
                        }

                        &:hover {
                            transform: translateY(-.5rem);
                            box-shadow: .1rem .2rem .5rem #252525;
                        }
                    }

                    .contact {
                        width: 21%;
                        border: 2px solid #fff;
                        border-radius: 20rem;
                        padding: .4rem;
                        cursor: pointer;
                        transition: all .4s;

                        span {
                            margin-left: .5rem;
                        }

                        &:hover {
                            transform: translateY(-.5rem);
                            box-shadow: .1rem .2rem .5rem #252525;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:1200px) {
        .container {
            .mode {
                .books {
                    .sub {
                        .learn {
                            width: 28%;
                        }

                        .contact {
                            width: 28%;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:995px) {
        .container {
            .mode {
                .books {
                    .sub {
                        .learn {
                            width: 28%;
                        }

                        .contact {
                            width: 28%;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:735px) {
        .container {
            .mode {
                .books {
                    width: 68%;

                    p {
                        margin-top: 1rem;
                    }

                    .invest {
                        font-size: 2.5rem;
                    }
                }

                #people2 {
                    display: block;
                }

                .people {
                    display: none;
                }
            }
        }
    }

    @media screen and (max-width:646px) {
        .container {
            .mode {
                .books {
                    width: 68%;

                    .invest {
                        font-size: 2.5rem;
                    }
                }

                #people2 {
                    display: block;
                }

                .people {
                    display: none;
                }
            }
        }
    }

    @media screen and (max-width:571px) {
        .container {
            .mode {
                .books {
                    width: 100%;
                    text-align: center;

                    .list {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                    }

                    .invest {
                        font-size: 2.5rem;
                    }

                    .sub {
                        justify-content: space-around;
                    }
                }

                #people2 {
                    display: none;
                }
            }
        }
    }


    @media screen and (max-width:376px) {
        .container {
            .mode {
                .books {
                    width: 100%;

                    .list {
                        width: 80%;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;

                    }

                    .invest {
                        font-size: 2.5rem;
                    }

                    .sub {
                        justify-content: space-around;

                        .learn {
                            width: 32%;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:355px) {
        .container {
            .mode {
                .books {
                    .invest {
                        font-size: 2rem;
                    }

                    .sub {
                        .learn {
                            width: 40%;
                        }

                        .contact {
                            width: 40%;
                        }
                    }
                }
            }
        }
    }




}



// plans部分
.plans {
    margin-top: 5rem;

    .container {
        .title {
            text-align: center;

            .invest {
                font-size: 3rem;
                color: #31364c;
            }

            p {
                width: 50%;
                color: #a5a8b3;
                font-size: 1rem;
                margin: 1.5rem auto;
                // background-color: #ccc;
            }

        }

        // 图片
        .now {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 3rem;
            flex-wrap: wrap;

            .days1 {
                width: 24%;
                transition: all .5s;

                #stan3 {
                    background-color: #008d80;
                }

                #stan2 {
                    background-color: #45a549;
                }

                #stan {
                    background-color: #80b740;
                }

                .standart {
                    text-align: center;
                    color: #fff;
                    padding: 1.2rem 0;
                    background-color: #c3d22f;

                    div {
                        font-size: 2.5rem;
                    }

                    p {
                        font-size: 1rem;

                    }
                }

                #ten3 {
                    background-color: #009688;
                }

                #ten2 {
                    background-color: #4caf50;
                }

                #ten {
                    background-color: #8bc34a;
                }

                .ten {
                    font-size: 3.5rem;
                    text-align: center;
                    line-height: 3.5rem;
                    background-color: #ccdb38;
                    padding: 2.5rem 0;
                    color: #fff;
                }

                .txt {
                    p {
                        padding-left: 1rem;
                        text-align: center;
                        font-size: .9rem;
                        color: #666;
                        line-height: 1.9rem;
                        text-align: left;
                        background-color: #fff;

                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 4;
                    }
                }

                #txt2 {
                    background-color: #fbfbfb;
                }

                #txt {
                    background-color: #fbfbfb;
                }

                .button {
                    padding: 1.5rem 0;
                    text-align: center;
                    background-color: #ccc;

                    button {

                        font-size: 1.2rem;
                        color: #fff;
                        background-color: #ccdb38;
                        border-radius: 20rem;
                        border: 0;
                        padding: 1rem 3.5rem;
                    }

                    #btns3 {
                        background-color: #009688;
                    }

                    #btns2 {
                        background-color: #4caf50;
                    }

                    #btns {
                        background-color: #8bc34a;
                    }
                }
            }

            .days1:hover {
                transform: scale(1.1);
                box-shadow: -.2rem .5rem .8rem #ccc;
            }
        }
    }

    @media screen and (max-width:624px) {
        .container {
            .title {
                p {
                    width: 100%;
                }
            }

            .now {

                margin-top: 1rem;
                justify-content: space-around;
                flex-wrap: wrap;

                .days1 {
                    width: 35%;
                    margin-top: 2rem;

                }
            }
        }
    }

    @media screen and (max-width:435px) {
        .container {
            .now {
                margin-top: 1rem;
                justify-content: space-around;
                flex-wrap: wrap;

                .days1 {
                    width: 60%;
                    margin-top: 2rem;
                }
            }
        }
    }
}

// quick部分
.quick {
    background-color: #f6f0e4;
    margin-top: 6rem;
    // padding-bottom: 3rem;

    .box {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .sit {
            width: 50%;

            .answers {
                font-size: 3.2rem;
                color: #31364c;

            }

            .lorem {
                margin-top: 3rem;
                font-size: 1rem;
                color: #9699a6;
                cursor: pointer;

                &:hover {
                    color: #80b740;
                }
            }

            .qui,
            .est,
            .dusi,
            .sit {
                &:hover {
                    color: #80b740;
                }

                cursor: pointer;
                margin-top: 3rem;
                width: 100%;
                color: #31364c;
                font-size: 1.2rem;
                padding: 1rem 0;
                border-bottom: 1px solid #6666;
                background: url("../images/jt2.png") no-repeat right center;
            }

            .quam {
                cursor: pointer;
                margin-top: 3rem;
                padding: 1rem 0;
                background: url("../images/jt3.png") no-repeat right center;

                &:hover {
                    color: #c8dba5;
                }
            }

            .nibh {
                color: #9699a6;
                padding-bottom: 1rem;
                border-bottom: 1px solid #6666;
                cursor: pointer;

                &:hover {
                    color: #80b740;
                }
            }

            .qui {
                border: 0;

            }
        }

        // 图片
        .nobis {
            width: 50%;
            text-align: center;
            margin-top: 3rem;
            align-self: flex-end;

            img {
                width: 60%;
            }
        }
    }

    @media screen and(max-width:992px) {

        .box {
            .nobis {
                img {
                    width: 73%;
                }
            }
        }
    }

    @media screen and(max-width:713px) {

        .box {
            .nobis {
                display: none;
            }

            .sit {
                width: 100%;
            }
        }
    }


}

// 系统部分
// .systems {

//     .container {
//         .pay {
//             color: #31364c;
//             font-size: 3rem;

//         }

//         .sed {
//             width: 90%;
//             display: flex;
//             justify-content: space-between;

//             .left {
//                 width: 90%;
//                 color: #9699a6;
//                 display: -webkit-box;
//                 -webkit-box-orient: vertical;
//                 overflow: hidden;
//                 -webkit-line-clamp: 2;
//                 text-overflow: ellipsis;
//             }

//             .right {
//                 display: flex;
//                 justify-content: space-between;
//                 width: 5%;

//                 span {

//                     display: inline-block;
//                     width: .5rem;
//                     height: .5rem;
//                     border-radius: 100%;
//                     background-color: #ccc;
//                     cursor: pointer;

//                     &:hover {
//                         background-color: #93c25e;
//                     }
//                 }
//             }


//         }

//         .logos {
//             margin-top: 3.2rem;
//             width: 90%;
//             display: flex;
//             justify-content: space-between;

//             .pay img {
//                 width: 60%;
//             }
//         }
//     }

//     @media screen and (max-width:625px) {
//         .container {
//             .logos {
//                 margin-top: 1rem;

//                 .pay {
//                     img {
//                         width: 80%;
//                     }
//                 }

//             }
//         }
//     }

//     @media screen and (max-width:554px) {
//         .container {
//             .pay {
//                 font-size: 1.5rem;
//             }

//             .sed {
//                 width: 100%;

//                 .left {
//                     width: 100%;
//                 }
//             }

//             .logos {
//                 margin-top: 1rem;

//                 .pay {
//                     img {
//                         width: 80%;
//                     }
//                 }

//             }
//         }
//     }
// }